<template>
  <div>
    <title-line title="基本设置" />
    <el-form ref="elForm" :model="formData" :rules="rules" label-width="110px">
      <el-form-item label="积分赠送：" prop="isGive" required>
        <el-radio v-model="formData.isGive" :label="true">开启</el-radio>
        <el-radio v-model="formData.isGive" :label="false">关闭</el-radio>
      </el-form-item>

      <div style="position: relative">
        <div>
          <el-form-item label="赠送条件：" required> </el-form-item>
        </div>

        <div class="flex" style="position: absolute; top: 0; left: 110px">
          <!-- 赠送条件-文字 -->
          <div class="flex items-center mb-20" style="height: 33px">
            <el-checkbox v-model="isOpenWordsCondition" :disabled="isOpenWordsOrUploadCondition"
              >文字超过</el-checkbox
            >
            <el-form-item prop="wordMinLimit" label-width="0" style="margin-bottom: 0">
              <el-input
                class="pl-5 pr-5"
                style="width: 140px"
                v-model="formData.wordMinLimit"
                :disabled="isOpenWordsOrUploadCondition"
              />
              <span>个字</span>
            </el-form-item>
          </div>

          <!-- 赠送条件-图片 -->
          <div class="flex items-center mb-20 ml-20" style="height: 33px">
            <el-checkbox v-model="isOpenUploadCondition" :disabled="isOpenWordsOrUploadCondition"
              >上传商品图片</el-checkbox
            >
            <el-form-item prop="imageMinLimit" label-width="0" style="margin-bottom: 0">
              <el-input
                class="pl-5 pr-5"
                style="width: 140px"
                v-model="formData.imageMinLimit"
                :disabled="isOpenWordsOrUploadCondition"
              />
              <span>张</span>
            </el-form-item>
          </div>

          <!-- 文字加图片 -->
          <div class="flex items-center mb-20 ml-20" style="height: 33px">
            <el-checkbox v-model="isOpenWordsOrUploadCondition">文字超过</el-checkbox>
            <el-form-item prop="wordMinLimit" label-width="0" style="margin-bottom: 0">
              <el-input class="pl-5 pr-5" style="width: 140px" v-model="formData.wordMinLimit" />
              <span>个字</span>
            </el-form-item>
            <span class="ft-12">+上传商品图片</span>
            <el-form-item prop="imageMinLimit" label-width="0" style="margin-bottom: 0">
              <el-input class="pl-5 pr-5" style="width: 140px" v-model="formData.imageMinLimit" />
              <span>张</span>
            </el-form-item>
          </div>
        </div>
      </div>

      <div style="position: relative">
        <div>
          <el-form-item label="赠送分值：" prop="giveType" required> </el-form-item>
        </div>

        <div class="flex" style="position: absolute; top: 0; left: 110px">
          <!-- 赠送积分值-固定 -->
          <div class="flex items-center">
            <el-radio v-model="formData.giveType" :label="1">固定</el-radio>
            <el-form-item
              prop="giveAmount"
              v-if="formData.giveType === 1"
              label-width="0"
              style="margin-bottom: 0"
            >
              <el-input class="pl-5 pr-5" style="width: 140px" v-model="formData.giveAmount" />
              <span style="color: #409eff; font-weight: bold">分</span>
            </el-form-item>
          </div>

          <!-- 赠送积分值-随机 -->
          <div class="flex items-center ml-20">
            <el-radio v-model="formData.giveType" :label="2">在</el-radio>
            <el-form-item
              prop="giveMinAmount"
              v-if="formData.giveType === 2"
              label-width="0"
              style="margin-bottom: 0"
            >
              <el-input class="pl-5 pr-5" style="width: 140px" v-model="formData.giveMinAmount" />
              <span style="color: #409eff; font-weight: bold">至</span>
            </el-form-item>

            <el-form-item
              prop="giveMaxAmount"
              v-if="formData.giveType === 2"
              label-width="0"
              style="margin-bottom: 0"
            >
              <el-input class="pl-5 pr-5" style="width: 140px" v-model="formData.giveMaxAmount" />
              <span style="color: #409eff; font-weight: bold">随机生成</span>
            </el-form-item>
          </div>
        </div>
      </div>

      <el-form-item prop="giveDescription" label="评论赠送积分说明：" label-width="150px">
        <el-col :span="12">
          <el-input
            v-model.trim="formData.giveDescription"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8 }"
            placeholder="请输入评价赠送积分说明50字以内"
          />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetForm">取消</el-button>
        <el-button @click="submitForm" type="primary">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import rules from './ruels'
export default {
  name: 'ParamsSet',
  data() {
    return {
      formData: {
        giveDescription: '',
        isGive: false,
        giveType: 1,
        giveAmount: '',
        giveMinAmount: '',
        giveMaxAmount: '',
        wordMinLimit: '',
        imageMinLimit: '',
        giveCondition: ''
      },
      isOpenWordsCondition: false, // 文字是否选中
      isOpenUploadCondition: false, // 图片是否选中
      isOpenWordsOrUploadCondition: false // 文字图片是否选中
    }
  },
  computed: {
    rules() {
      return rules
    }
  },
  watch: {
    // 选中文字和图片
    isOpenWordsOrUploadCondition(checked) {
      if (checked) {
        this.isOpenWordsCondition = true
        this.isOpenUploadCondition = true
      }
    },
    'formData.giveType'(giveType) {
      if (giveType === 1) {
        this.formData.giveMinAmount = ''
        this.formData.giveMaxAmount = ''
      }
    }
  },
  created() {
    this.getGoodsCommentSetting()
  },
  methods: {
    // 获取配置
    async getGoodsCommentSetting() {
      const { data } = await this.$http.order.appraiseApi.getGoodsCommentSetting()
      for (const key in data) {
        this.formData[key] = data[key]
      }
      this.setGiveCondition(this.formData.giveCondition)
    },
    // 获取选中赠送条件
    getGiveCondition() {
      // 2-用字数条件;4-用图片数量条件;8-字数和图片同时达到条件
      if (this.isOpenWordsOrUploadCondition) {
        return '8'
      } else if (this.isOpenWordsCondition && this.isOpenUploadCondition) {
        return '2,4'
      } else if (this.isOpenWordsCondition) {
        return '2'
      } else if (this.isOpenUploadCondition) {
        return '4'
      }
    },
    // 回显选中赠送条件
    setGiveCondition(giveCondition) {
      if (giveCondition === '2,4') {
        this.isOpenWordsCondition = true
        this.isOpenUploadCondition = true
        return
      }
      if (giveCondition === '8') {
        this.isOpenWordsOrUploadCondition = true
        this.isOpenWordsCondition = true
        this.isOpenUploadCondition = true
        return
      }
      this.isOpenWordsCondition = giveCondition === '2' ? true : false
      this.isOpenUploadCondition = giveCondition === '4' ? true : false
    },
    // 提交修改
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return

        const params = {
          ...this.formData,
          giveCondition: this.getGiveCondition()
        }
        const { status, msg } = await this.$http.order.appraiseApi.editGoodsCommentSetting(params)
        if (status === 200) {
          this.$message.success('编辑成功！')
          this.getGoodsCommentSetting()
        } else {
          this.$message.error(msg)
        }
      })
    },
    resetForm() {
      this.getGoodsCommentSetting()
    }
  }
}
</script>
